<template>
  <div id="fan">
    <div class="art-title">
    </div>
    <div class="art-scroll">
      <div class="art-card" v-for="(item, i) of arr" :key="i" :type="i" :class="i==arr.length-1?'marginRight':''">
        <div>
          <van-image
            :src="`${baseURL}/jd_card/goods/${item.gpic}`"
            @click="click(i)"
          /> 
          <p class="card-title">
            {{ arr9[i] }}
          </p>
        </div>
        <div class="add-car" @click="goMore"></div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props:['arr8fan'],
  data() {
    return {
      arr0:[],
      arr1:[],
      arr2:[],
      arr3:[],
      arr4:[],
      arr5:[],
      arr6:[],
      arr7:[],
      arr:[],//分类轮播商品
      // arr8:[],
      arr9:["经典卡","节日卡","艺术卡","生日卡","福气卡","感恩卡","真情卡","星座卡"],
      xl:''
    }
  },
  mounted(){
    console.log(this.arr8fan)
      let arrs=[];
      arrs=this.arr8fan;
      console.log(arrs);
          for(let i=0;i<arrs.length;i++){
              if(arrs[i].is_xl0){
                this.arr0.push(arrs[i]);
              }else if(arrs[i].is_xl1){
                this.arr1.push(arrs[i])
              }else if(arrs[i].is_xl2){
                this.arr2.push(arrs[i])
              }else if(arrs[i].is_xl3){
                this.arr3.push(arrs[i])
              }else if(arrs[i].is_xl4){
                this.arr4.push(arrs[i])
              }else if(arrs[i].is_xl5){
                this.arr5.push(arrs[i])
              }else if(arrs[i].is_xl6){
                this.arr6.push(arrs[i])
              }else{
                this.arr7.push(arrs[i])
              }
        }
       this.arr=[this.arr0[0],this.arr1[0],this.arr2[0],this.arr3[0],this.arr4[0],this.arr5[0],this.arr6[0],this.arr7[0]];
      console.log(this.arr)      
  },
  methods:{
    click(event){
      this.xl=`is_xl${event}`;
      console.log(`当前点击系列：${this.xl}`);
      this.$emit('update',this.xl)
    },
  
    goMore(herf) {
      // this.$router.push(`${herf}`);
    },
  }
};
</script>
<style lang="scss" scoped>
.marginRight{
  margin-right:0.63rem
}
#fan {
  position: relative;
 }
 ::-webkit-scrollbar {
	/*隐藏滚轮*/
	display: none !important;
}
  .art-scroll {
    padding: 10px 0;
    overflow: hidden;
    overflow-x: scroll;
    font-size: 12px;
    text-align: center;
    white-space: nowrap;
    position: relative;
    .art-card {
      display: inline-block;
      width: 9.375rem;
      padding: 0.625rem 0;
      margin-left: 0.725rem;
      position: relative;
      background-color: rgb(255, 254, 253);
      box-shadow: 1px 1px 3px rgb(184, 184, 183),-1px 1px 3px rgb(196, 195, 195);
      border-radius: 0.3125rem;
      div{
        img {
          width: 8.75rem;
          height: 8.75rem;
        }
        .card-title {
          position: absolute;
          bottom: 0;
          left: 31%;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          color:#b69959;
          line-height: 1rem;
          padding: 0 0.625rem;
          text-align: center;
          font-size: 12px;
          font-family: Arial,微软雅黑,'Heiti SC',黑体;
          white-space: normal;
        }
      }
    }
}
</style>